<template>
  <div class="sale_list">
    <!--销售合同列表-->
    <div class="btns" style="padding: 1em;margin-bottom: 1em;background:#fff">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="toAdd">添加</el-button>
      <el-input v-model="searchForm.contractName" type="text" size="small" placeholder="合同名" clearable/>
      <el-input v-model="searchForm.projectName" type="text" size="small" placeholder="项目名" clearable/>
      <el-button type="primary" icon="el-icon-search" size="mini" @click="toSearch">查询</el-button>
    </div>
    <div style="padding:1em;margin-bottom:1em;background:#fff">
      <a-table
        :loading="loading"
        :data-source="saleContract"
        size="middle"
        :rowKey="record => record.id"
        :scroll="saleContract.length>0?{x:1300}:{}">
        <a-table-column :width="60" title="序号" align="center">
          <template slot-scope="text, record, index">
            {{index+1}}
          </template>
        </a-table-column>
        <a-table-column :width="200" key="contractNo" title="合同编号" data-index="contractNo" ellipsis="true" align="center"/>
        <a-table-column key="enginerring" title="工程" data-index="enginerring" ellipsis="true" align="center"/>
        <a-table-column key="type" title="合同类型" data-index="type" ellipsis="true" align="center"/>
        <a-table-column key="origin" title="合同来源" data-index="origin" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="accountReceivable" title="应收款" data-index="accountReceivable" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="accountReceivableTime" title="应收时间" data-index="accountReceivableTime" ellipsis="true" align="center">
        </a-table-column>
        <a-table-column :width="100" key="price" title="总价" data-index="price" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="correctPrice" title="修正价" data-index="correctPrice" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="retentionMoney" title="质保金" data-index="retentionMoney" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="retentionTime" title="回收时间" data-index="retentionTime" ellipsis="true" align="center">
        </a-table-column>
        <a-table-column key="remark" title="备注" data-index="remark" ellipsis="true" align="center"/>
        <a-table-column :width="100" key="operator" title="创建人" data-index="operator" ellipsis="true" align="center"/>
        <a-table-column :width="180" key="time" title="创建时间">
          <template slot-scope="text, record">
            {{dateTimeFormat(record.time)}}
          </template>
        </a-table-column>
        <a-table-column :width="180" title="操作" fixed="right" key="action" align="center">
          <template slot-scope="text, record">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteHandler(record.id)" />
            <el-button type="success" icon="el-icon-edit" size="mini" @click="editHandler(record)" />
            <el-button type="success" icon="el-icon-more" size="mini" @click="detailHandler(record.id, record.projectId)" />
          </template>
        </a-table-column>
      </a-table>
    </div>

    <!-- 模态框 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" :rules="rules">
      <el-form ref="form" status-icon :model="form" :rules="rules">
        <el-row :gutter="10">
          <el-col :lg="12" :sm="24">
            <el-form-item label="合同编号" label-width="80px" prop="contractNo">
              <el-input v-model="form.contractNo" placeholder="合同编号" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :lg="12" :sm="24">
            <el-form-item label="合同类型" label-width="80px" prop="enginerring">
              <el-select v-model="form.enginerring" placeholder="请选择">
                <el-option key="1" label="工况合同" value="工况合同"></el-option>
                <el-option key="2" label="零库存合同" value="零库存合同"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="12" :sm="24">
            <el-form-item label="合同总价" label-width="80px">
              <el-input v-model="form.price" placeholder="合同总价" autocomplete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :lg="8" :sm="24">
            <el-form-item label="应收款" label-width="80px">
              <el-input v-model="form.accountReceivable" placeholder="应收款" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :sm="24">
            <el-form-item label="应收时间" label-width="80px">
              <el-date-picker v-model="form.retentionTime" value-format="timestamp" clearable placeholder="应收时间" size="small" />
            </el-form-item>
          </el-col>
          <el-col :lg="8" :sm="24">
            <el-form-item label="应收备注" label-width="80px" prop="proTypeId">
              <el-input v-model="form.accountRemark" placeholder="应收备注" autocomplete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :lg="8" :sm="24">
            <el-form-item label="质保金" label-width="80px">
              <el-input v-model="form.retentionMoney" placeholder="质保金" autocomplete="off"/>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :sm="24">
            <el-form-item label="回收时间" label-width="80px">
            <el-date-picker v-model="form.retentionTime" value-format="timestamp" clearable placeholder="回收时间" size="small" />
          </el-form-item>
          </el-col>
          <el-col :lg="8" :sm="24">
            <el-form-item label="回收备注" label-width="80px">
              <el-input v-model="form.retentionRemark" placeholder="回收备注" autocomplete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :lg="12" :sm="24">
            <el-form-item label="修正价" label-width="80px">
              <el-input v-model="form.correctPrice" placeholder="修正价" autocomplete="off"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注" label-width="80px" prop="remark">
          <el-input type="textarea" v-model="form.remark" placeholder="备注" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" size="small" @click="saveRecordHandler('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>

  import { dateTimeFormat } from '@/utils/format'
  import {getAction, postActionByQueryString} from '@/api/manage'
  import '@/styles/auto-style.css'

  export default {
    name: "list.uve",

    data(){

      var validNo = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('不能为空'));
        }
        getAction(this.url.findSaleContractNo,{ contractNo: value })
        .then(response => {
          if (response.data > 0 && value!=this.contractNo) {
            callback(new Error('合同编号已存在'))
          }else {
            callback()
          }
        })
      };
      return{
        contractNo: null,
        projects: [],
        proOrigins: [],
        proTypes: [],
        title: '',
        saleContract: [],
        searchForm: {},
        loading: false,
        dialogVisible: false,
        form: {},
        url: {
          findSaleContractNo: '/contract/sale/findSaleContractNo',
          setInvalid: '/contract/sale/setInvalid',
          findProjects: '/project/detail/findByAll',
          saveOrUpdate: '/contract/sale/saveOrUpdate',
          findSaleContractData: '/contract/sale/findSaleContractData'
        },
        rules: {
          contractNo: [
            { validator: validNo, trigger: 'blur'}
          ],
          price: [
            { required: true, pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式不正确', trigger: 'blur' }
          ],
          accountReceivable: [
            { required: true, pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式不正确', trigger: 'blur' }
          ],
          retentionMoney: [
            { required: true, pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式不正确', trigger: 'blur' }
          ],
          correctPrice: [
            { required: true, pattern: /^(\-|\+)?\d+(\.\d+)?$/, message: '格式不正确', trigger: 'blur' }
          ],
        }
      }
    },
    created(){
      this.toSearch()
      this.loadProjects()
    },
    methods: {

      loadProjects(){
        getAction(this.url.findProjects)
        .then(resp => {
          this.projects = resp.data
        }).catch(()=>{
          this.$message({ type : "error" , message : "项目查询失败"})
        }).finally(()=>{

        })
      },
      saveRecordHandler(form){
        this.$refs[form].validate((valid) => {
          if (valid) {
            postActionByQueryString(this.url.saveOrUpdate, this.form)
            .then( resp => {
              this.$message({ message: resp.message, type: 'success' })
              this.dialogVisible = false
            }).catch(()=>{
              this.$message({ message: "查询失败", type: 'error' })
            }).finally(()=>{
              this.toSearch()
            })
          }else {
            return false
          }
        })
      },
      toAdd(){
        this.title = "添加销售合同"
        this.dialogVisible = true
        //重置
        this.contractNo = null
        this.form = {}
        this.loadProjects()
      },
      toSearch(){
        this.loading = true
        getAction(this.url.findSaleContractData, {name: this.searchForm.contractName})
        .then(resp => {
          this.saleContract = resp.data
        })
        .catch(() => {
          this.$message({message: "查询失败", type: 'error'})
        }).finally(()=>{
          this.loading = false;
        })
      },
      deleteHandler(saleContractId){
        this.$confirm('是否确定删除？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          postActionByQueryString(this.url.setInvalid, {contractIds: saleContractId})
            .then(resp => {
              this.$message({message: resp.message, type: 'success'})
            }).catch(()=>{
              this.$message({message: "删除失败", type: 'error'})
          }).finally(()=>{
              this.toSearch()
          })
        })
      },
      editHandler(record){
        this.form = record
        this.title = "修改销售合同"
        this.dialogVisible = true
        this.contractNo = record.contractNo
        this.loadProjects()
      },
      dateTimeFormat,
      detailHandler(id, proId){
        //跳转到详情页
        this.$router.push({path: '/sale/contract/detail', query: {saleId : id, proId: proId}})
      }
    }
  }

</script>

<style lang="scss" scoped>
  .sale_list {
    /deep/.el-form-item__content {
      height:auto;
      line-height:32px;
      margin-left:90px!important
    }
  }
</style>
